
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { TEST_ICONS } from '../router/constants';

function HomePage() {
  const navigate = useNavigate();

  const testButtons = [
    {
      path: '/graphics-test',
      title: '图形测试',
      icon: TEST_ICONS.graphics,
      description: '测试图形识别和空间想象能力'
    },
    {
      path: '/color-test',
      title: '颜色测试',
      icon: TEST_ICONS.color,
      description: '测试颜色识别和色彩感知能力'
    },
    {
      path: '/number-test',
      title: '数字测试',
      icon: TEST_ICONS.number,
      description: '测试数字计算和逻辑思维能力'
    },
    {
      path: '/letter-test',
      title: '字母测试',
      icon: TEST_ICONS.letter,
      description: '测试字母识别和语言能力'
    },
    {
      path: '/chinese-test',
      title: '汉字测试',
      icon: TEST_ICONS.chinese,
      description: '测试汉字识别和中文能力'
    },
    {
      path: '/cube-observation',
      title: '魔方与观测力',
      icon: TEST_ICONS.cubeObservation,
      description: '测试魔方观测和空间思维能力'
    },
    {
      path: '/cube-memory',
      title: '魔方与记忆力',
      icon: TEST_ICONS.cubeMemory,
      description: '测试魔方记忆和专注力'
    }
  ];

  return (
    <div className="page-container">
      <div className="page-header">
        <h1 className="page-title">🎮 Game Liu</h1>
        <p className="page-description">选择您想要进行的测试</p>
      </div>
      
      <div className="test-grid">
        {testButtons.map((test, index) => (
          <button
            key={index}
            className="test-button-card"
            onClick={() => navigate(test.path)}
          >
            <div className="test-icon">{test.icon}</div>
            <div className="test-title">{test.title}</div>
            <div className="test-description">{test.description}</div>
          </button>
        ))}
      </div>
      
      <div className="home-footer">
        <p>点击任意测试按钮开始游戏</p>
      </div>
    </div>
  );
}

export default HomePage;
